<style>
.chart-area{
	position: relative;
}
.chartName{
	position: absolute;
	top: 14px;
}
.result-tip{
	position: absolute;
	top: 115px;
	color: #cdcdcd;
}
</style>
<div class="content-byc image-content" ng-controller="hostDetailCtrl">
    <div class="animated update-content" ng-class="{true:'bounceInRight',false:'bounceOutRight'}[isActive]"
         ng-if="showDetail==1">
        <div class="wrapper-md">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default" style="padding:0;">
                        <div class="panel-heading font-bold" style="height: 40px;">
                            <div class="col-md-4 " ng-bind="hostDetail.hostName">
                            </div>
                            <div class="col-md-8 ">
                                <label><input type="radio"  value='static' ng-checked='true' ng-model="datamodel"  ng-click="modelChange('static')" />过去一小时</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio"  value="'auto'" ng-model="datamodel" ng-click="modelChange('auto')" />即时数据</label>
                                <button class="btn btn-info pull-right" style="margin-top: -7px;" ng-click="goBack()" tabindex="0">
                                    <i class="fa fa-reply icon-font"></i> 返回
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="col-md-12 hostdetail" style="padding-right: 0px;">
                                <div class="col-md-3" style="padding: 39px 0px;">
                                    <img src="/statics/img/host_img.png" style="height: 70px;">
                                </div>
                                <div class="col-md-2" style="padding: 30px 0px;">
                                    <img src="/statics/img/host_fen.png" style="height: 88px;">
                                </div>
                                <div class="col-md-7" style="padding-right: 0px;">
                                    <div class="col-md-12" style="padding-right: 0px;height: 74px;margin-top: 20px;">
                                        <ul class="list-unstyled">
                                            <li ><span class="dfont">名称</span><span class="dfont-back" ng-bind="hostDetail.hostName"></span></li>
                                        </ul>
                                        <!--<span class="develop-re">名称</span>&nbsp;&nbsp;
                                        <span class="develop-re" ng-bind="hostDetail.hostName"></span>-->
                                    </div>
                                    <div class="col-md-12" style="padding-right: 0px;height: 74px;">
                                       <!-- <span class="develop-re">类型</span>&nbsp;&nbsp;
                                        <span class="develop-re" ng-bind="hostDetail.hostType|comHostType:'hostType'"></span>-->
                                        <ul class="list-unstyled">
                                            <li ><span class="dfont">类型</span><span class="dfont-back" ng-bind="hostDetail.hostType|comHostType:'hostType'"></span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 hostdetail" style="margin-bottom: 20px;">
                                <div class="">
                                    <h5 class="console-title">基本信息</h5>
                                    <ul class="list-unstyled">
                                        <li ><span class="dfont">系统</span><span class="dfont-back" ng-bind="hostDetail.hostOs"></span></li>
                                        <li ><span class="dfont">Kernel</span><span class="dfont-back" ng-bind="hostDetail.hostKernelVersion"></span></li>
                                        <li ><span class="dfont">主机名</span><span class="dfont-back" ng-bind="hostDetail.hostRealName"></span></li>
                                        <li ><span class="dfont">启动时间</span><span class="dfont-back" ng-bind="hostDetail.hostBoot | date:'yyyy-MM-dd HH:mm:ss'"></span></li>
                                        <li ><span class="dfont">cpu</span><span class="dfont-back" ng-bind="hostDetail.hostCpu"></span>核</li>
                                        <li ><span class="dfont">内存</span><span class="dfont-back" ng-bind="hostDetail.hostMem"></span>G</li>
                                        <li ><span class="dfont">网络</span>
                                            <div style="display: inline-grid;">
                                            <div ng-repeat="row in hostDetail.network">
                                               <span class="dfont-back" ng-bind="row.name"></span>
                                            </div>
                                            </div>
                                        </li>
                                        <li ng-show="flag==1"><span class="dfont">健康状态</span><span class="dfont-back" ng-bind="hostDetail.Boot"></span></li>
                                        <li ng-show="flag==1"><span class="dfont">类型</span><span class="dfont-back" ng-bind="hostDetail.Boot"></span></li>
                                        <li ng-show="flag==1"><span class="dfont">关联仓库</span><span class="dfont-back" ng-bind="hostDetail.Boot"></span></li>
                                        <li ng-show="flag==1"><span class="dfont">高可用</span><span class="dfont-back" ng-bind="hostDetail.Boot"></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
	                        <div class="col-md-6">
                                <div class="chart-area">
                                    <span class="chartName">cpu监控(%)</span>
                                    <div id="img_cpu" style="height: 250px;">
                                    	<span class='result-tip' ng-if="resultTip">无数据</span>
                                    </div>
                                </div>
                            	<div  class="chart-area">
                                    <span class="chartName">内存监控(MB)</span>
                                    <div id="img_memery" style="height: 250px;">
                                    	<span class='result-tip' ng-if="resultTip">无数据</span>
                                    </div>
                                </div>
	                        </div>
	                        <div class="col-md-6">
	                        	<div class="chart-area">
                                    <span class="chartName">入网监控(KB/s)</span>
                                    <div id="img_net" style="height: 250px;">
                                    	<span class='result-tip' ng-if="resultTip">无数据</span>
                                    </div>
                                </div>
                                <div class="chart-area">
                                    <span class="chartName">出网监控(KB/s)</span>
                                    <div id="img_net_out" style="height: 250px;">
                                    	<span class='result-tip' ng-if="resultTip">无数据</span>
                                    </div>
                                </div>
	                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>